<template>
	<view class="flex-col page">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="flex-col image-wrapper">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image" @click="pageBack"/>
		</view>
		<scroll-view scroll-y class="flex-col group" :style="'background-color: rgba(245,245,245,'+opacityNum+')'"
			@scroll="changeBGC">
			<view class="flex-col section_1">
				<text class="text">{{detail.name}}</text>
				<text class="text_1">简介：{{detail.title}}</text>
				<view class="image_1">
					<u-image :src="detail.avatar" :lazy-load="true" mode="aspectFill"></u-image>
				</view>
			</view>
			<view class="flex-col section_2">
				<view class="flex-row group_1">
					<image src="/static/local/16403090244487156205.png" class="image_2" />
					<text class="text_2">个人介绍</text>
				</view>
				<u-parse :html="detail.introduce" show-with-animation></u-parse>
			</view>
			<view class="empty"></view>
		</scroll-view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				detail: {},
				// 列表背景颜色深度
				opacityNum: 0
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				vk.callFunction({
					url: 'client/teachers/pub/checkDetail',
					data: {
						id: options.id
					},
					success(res) {
						that.detail = res.data
					}
				});
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 修改背景颜色
			changeBGC(e) {
				if (e.detail.scrollTop >= 0) {
					if (e.detail.scrollTop <= 50) {
						this.opacityNum = 0
					} else if (50 < e.detail.scrollTop && e.detail.scrollTop <= 110) {
						this.opacityNum = e.detail.scrollTop / 110
					} else if (e.detail.scrollTop > 110) {
						this.opacityNum = 1
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		width: 100%;
		min-height: 100vh;

		.status_bar,
		.top_view {
			background-color: #FDCF03;
		}

		.image-wrapper {
			padding: 26rpx 0 246rpx;
			background-image: linear-gradient(176.5deg,
					rgb(253, 211, 3) 0%,
					rgb(253, 211, 3) 0.02%,
					rgb(255, 172, 5) 50.03%,
					rgb(255, 172, 5) 100%);

			.image {
				margin-left: 28rpx;
				width: 19rpx;
				height: 35rpx;
			}
		}

		.group {
			position: fixed;
			top: 168rpx;
			height: calc(100% - 168rpx);

			.section_1 {
				padding: 145rpx 30rpx 40rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 12rpx;
				position: relative;
				margin: 100rpx 20rpx 20rpx;

				.text {
					align-self: center;
					color: rgb(41, 58, 65);
					font-size: 30rpx;
					line-height: 36rpx;
					white-space: nowrap;
				}

				.text_1 {
					margin-top: 28rpx;
					color: rgb(102, 102, 102);
					font-size: 28rpx;
					line-height: 33rpx;
					text-align: left;
				}
			}

			.image_1 {
				border-radius: 89rpx;
				width: 177rpx;
				height: 177rpx;
				position: absolute;
				top: -80rpx;
				left: 50%;
				transform: translateX(-50%);
				overflow: hidden;

				.u-image {
					width: 100% !important;
					height: 100% !important;
				}
			}
		}

		.section_2 {
			margin: 0 20rpx 20rpx;
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;

			.group_1 {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
				margin-bottom: 20rpx;

				.image_2 {
					width: 48rpx;
					height: 48rpx;
				}

				.text_2 {
					margin: 8rpx 0 6rpx 13rpx;
				}
			}
		}
	}
	
	.empty {
		height: 60rpx;
	}
</style>
